{% extends "base.html" %}

{% block title %}隐私设置 - 音乐平台{% endblock %}

{% block content %}
<section class="container py-5">
    <div class="privacy-header text-center mb-5">
        <h2 class="display-5">🔒 隐私设置中心</h2>
        <p class="lead text-muted">管理您的账户安全与内容可见性</p>
    </div>

    <!-- 消息提示 -->
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            <div class="toast-container position-fixed bottom-0 end-0 p-3">
                {% for category, message in messages %}
                <div class="toast align-items-center text-bg-{{ category }} border-0" role="alert">
                    <div class="d-flex">
                        <div class="toast-body">{{ message }}</div>
                        <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast"></button>
                    </div>
                </div>
                {% endfor %}
            </div>
        {% endif %}
    {% endwith %}

    <form method="POST" action="{{ url_for('privacy_settings') }}">
        <!-- 账户安全模块 -->
        <div class="card privacy-card mb-4">
            <div class="card-body">
                <h5 class="card-title mb-4">📱 账户安全设置</h5>
                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" 
                                   id="twoFactorAuth" name="two_factor_auth" 
                                   {{ 'checked' if current_user.two_factor_auth }}>
                            <label class="form-check-label" for="twoFactorAuth">
                                双重认证保护（推荐开启）
                            </label>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <select class="form-select" id="accountVisibility" name="account_visibility">
                            <option value="public" {{ 'selected' if current_user.profile_visible }}>
                                公开个人主页
                            </option>
                            <option value="private" {{ 'selected' if not current_user.profile_visible }}>
                                仅自己可见
                            </option>
                        </select>
                        <small class="text-muted">控制他人查看您主页的权限</small>
                    </div>
                </div>
            </div>
        </div>

        <!-- 歌单隐私模块 -->
        <div class="card privacy-card mb-4">
            <div class="card-body">
                <h5 class="card-title mb-4">🎵 歌单可见性管理</h5>
                <div class="mb-4">
                    <label class="form-label">默认新建歌单可见性：</label>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" 
                               name="default_visibility" id="defaultPrivate" value="private"
                               {{ 'checked' if not current_user.default_playlist_public }}>
                        <label class="form-check-label" for="defaultPrivate">
                            私有（仅自己可见）
                        </label>
                    </div>
                </div>

                <div class="playlist-list">
                    {% for playlist in current_user.playlists %}
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" 
                               id="playlist_{{ playlist.id }}" 
                               name="playlist_{{ playlist.id }}_visibility"
                               {{ 'checked' if playlist.is_public }}>
                        <label class="form-check-label" for="playlist_{{ playlist.id }}">
                            「{{ playlist.name }}」歌单（创建于 {{ playlist.created_at.strftime('%Y-%m-%d') }}）
                        </label>
                    </div>
                    {% else %}
                    <div class="alert alert-info">
                        <i class="bi bi-music-note-list"></i> 您尚未创建任何歌单
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <!-- 浏览器隐私模块 -->
        <div class="card privacy-card mb-4">
            <div class="card-body">
                <h5 class="card-title mb-4">🌐 浏览数据保护</h5>
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" 
                           id="trackingProtection" name="tracking_protection"
                           {{ 'checked' if current_user.tracking_protection }}>
                    <label class="form-check-label" for="trackingProtection">
                        阻止跨站跟踪（推荐开启）
                    </label>
                </div>
                <div class="form-check form-switch mt-3">
                    <input class="form-check-input" type="checkbox" 
                           id="clearCookies" name="auto_clear_cookies"
                           {{ 'checked' if current_user.auto_clear_cookies }}>
                    <label class="form-check-label" for="clearCookies">
                        退出时自动清除Cookies
                    </label>
                </div>
            </div>
        </div>

        <!-- 操作按钮组 -->
        <div class="text-center mt-4">
            <button type="submit" class="btn btn-primary px-5">
                <i class="bi bi-save"></i> 保存所有设置
            </button>
            <button type="button" class="btn btn-outline-secondary" 
                    onclick="location.href='{{ url_for('index') }}'">
                返回首页
            </button>
        </div>
    </form>
</section>

<!-- 脚本区域 -->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script>
    // 自动显示消息提示
    document.addEventListener('DOMContentLoaded', function() {
        var toastElList = [].slice.call(document.querySelectorAll('.toast'))
        toastElList.map(function(toastEl) {
            new bootstrap.Toast(toastEl).show()
        })
    })
</script>
{% endblock %}
